/*
  学习目标：useEffect-第二个参数小结
  1. 第二个参数： []
  2. 第二个参数： [依赖项]
  3. 第二个参数： 不写
  
*/

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('hello React');

  // 🔔 空数组： 挂载后
  // useEffect(() => {
  //   console.log('执行了  ----->  ');
  // }, []);

  //  👍挂载、更新、 二合一
  // 只会监听数据的变化
  useEffect(() => {
    console.log('count执行了  ----->  ');
  }, [count]);

  // 👎 挂载、更新、 二合一
  // 会监听所有数据的变化， 浪费性能
  // useEffect(() => {
  //   console.log('不写执行了  ----->  ');
  // });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>点我+1</button>
      <h1>{msg}</h1>
      <button onClick={() => setMsg(msg + '~')}>点我+~</button>
    </div>
  );
}
